<template>
	<view class="home">
		<view class="heard">
			<view class="heard-title text-bold" :style="{'padding-top':sysstatusBarHeight+'px'}">泰铢的金额</view>
			<view class="heard-edu">
				<view class="text-bold edu">{{currentLimit?($u.priceFormat(currentLimit,2)):'????'}}</view>
				<view class="edu-right">
					<u-tag text="贷款额度" plain type="warning" bgColor="#58CFF7" color="#fff" borderColor="#fff"
						@click="edumodalshow = true"></u-tag>
				</view>
			</view>
			<view class="heard-edulist">
				<view class="heard-edulist-item" :class="currentLimit == menuItem?'heard-edulist-select':''"
					v-for="(menuItem,index) in edulist" @click="currentLimit = menuItem">{{index}}</view>
			</view>
		</view>

		<view class="qixian">
			<view class="qixian-panel">
				<text>贷款期限</text>
				<view class="yue">
					<view class="yue-item" :class="currentYueLimit == index?'yue-select':''"
						v-for="(menuItem,index) in daikuanmonth_list" @click="currentYueLimit = index">{{index}}月</view>
				</view>
			</view>
			<u-line></u-line>
		</view>

		<view class="huankuan">
			<view class="huankuan-panel">
				<view class="huaikuan-yue">
					<text class="left">每月还款</text>
					<text class="right">{{repayment?($u.priceFormat(repayment,2)):'--'}}</text>
				</view>
				<view class="huaikuan-yue">
					<text class="left"></text>
					<text class="hui">月利率:{{daikuanmonth_list?daikuanmonth_list[currentYueLimit]:'?'}}</text>
				</view>
			</view>
			<u-line></u-line>
		</view>
		<view class="xieyi-panel">
			<view class="checkbox">
				<u-checkbox-group :size="14" v-model="checked">
					<u-checkbox :name="1"></u-checkbox>
					同意<text class="cheng-color" @click="openXieyi(1)">《贷款合同》</text><text class="cheng-red"
						@click="openXieyi(1)">查询此协议</text>
				</u-checkbox-group>
			</view>
		</view>

		<view class="button-panel">
			<view class="button-jieian">
				<u-button text="马上借钱" :color="themeColor.color" @click="apply"></u-button>
			</view>
		</view>
		<view class="w100">
			<u-notice-bar :text="notice" icon="" bgColor="#f3f4f6" direction="column" color="#ed6a0c"></u-notice-bar>
		</view>
		<view class="swiper">
			<u-swiper :list="swiper_list" height="200" keyName="image"></u-swiper>
		</view>


		<!-- 贷款额度弹窗 -->
		<u-modal :show="edumodalshow" title="贷款额度" closeOnClickOverlay showCancelButton @confirm="edumodal_confirm"
			@cancel="edumodalshow = false" @close="edumodalshow= false">
			<u--input slot="default" placeholder="请输入额度" border="surround" v-model="edumodal_input" clearable
				type="number"></u--input>
		</u-modal>

		<!-- 协议合同 -->
		<u-modal :show="xieyi.show" :title="xieyi.title" @close="xieyi.show = false" @cancel="xieyi.show = false"
			closeOnClickOverlay @confirm="xieyi_confirm" confirmText="同意">
			<view class="slot-content">
				<rich-text :nodes="xieyi.content"></rich-text>
			</view>
		</u-modal>
	</view>
</template>

<script>
	var _this;
	import {
		api_daikuanprice,
		api_daikuanmonth,
		api_treaty,
		api_ads,
		api_broadcast
	} from '../../common/api.js'
	export default {
		data() {
			return {
				form: {
					checkboxValue: false,
				},
				checked: [],
				edulist: {},
				currentLimit: null,
				edumodalshow: false,
				edumodal_input: '',
				daikuanmonth_list: null,
				currentYueLimit: null,
				repayment: null, //还款
				xieyi: {
					show: false,
					title: '',
					content: ''
				},
				swiper_list: [],
				notice: []
			}
		},
		watch: {
			currentLimit(val, oldVal) {
				this.setRepayment();
			},
			currentYueLimit(val, oldVal) {
				this.setRepayment();
			},
		},

		methods: {
			load() {
				_this = this;
				this.getDaikuanprice();
				this.getDaikuanmonth();
			},
			setRepayment() {
				if (!this.currentLimit || !this.currentYueLimit) return this.repayment = null;

				let lvlbai = this.daikuanmonth_list[this.currentYueLimit];
				let lvl = Number(lvlbai.substr(0, lvlbai.length - 1));
				this.repayment = Number(this.currentLimit) * lvl / 100 + (Number(this.currentLimit) / Number(this
					.currentYueLimit))
			},
			getDaikuanprice() {
				api_daikuanprice().then(res => {
					_this.edulist = res
					for (var i in res) {
						_this.currentLimit = res[i];
						break;
					}
				})
				api_broadcast().then(res => {
					var value = [];
					for (let i=0;i<res.length;i++) {
						value.push(`${res[i].date}:${res[i].mobile} ${this.getjiekuantype(res[i].type)}${res[i].price}`);
					}
					_this.notice = value
				})
			},
			getjiekuantype(type){
				if (type == 'creditsq') return '贷款申请';
				if (type == 'credittrue') return '贷款成功';
				if (type == 'cashsq') return '提现申请';
				if (type == 'cashtrue') return '提现成功';
				
			},
			getDaikuanmonth() {
				api_daikuanmonth().then(res => {
					_this.daikuanmonth_list = res
					for (var i in res) {
						_this.currentYueLimit = i;
						break;
					}
				})

				let params = {
					flag: 'home'
				};
				api_ads({
					params: params
				}).then(res => {
					_this.swiper_list = res
				})
			},
			edumodal_confirm() {
				if (Number(this.edumodal_input) < 1000) return uni.$u.toast('额度必须大于1000');
				this.edumodalshow = false
				this.currentLimit = this.edumodal_input
			},
			openXieyi(e) {
				let params = {
					id: e
				};
				api_treaty({
					params: params
				}).then(res => {
					if (res[0]) {
						_this.xieyi.title = res[0].name;
						_this.xieyi.content = res[0].content;
						_this.xieyi.show = true;
					}
				})
			},
			xieyi_confirm() {
				_this.xieyi.show = false;
				_this.checked = [1];
			},
			apply() {
				if (!this.verifyLogin()) return;
				if (!this.currentLimit || !this.currentYueLimit || !this.repayment) return uni.$u.toast('额度信息不正确');
				if (_this.checked.length < 1) return uni.$u.toast('请阅读并同意合同');

				uni.navigateTo({
					url: `../loans/apply?price=${this.currentLimit}&pricetime=${this.currentYueLimit}`
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.home{
		background-color: #fff;
	}
	.heard {
		height: 400rpx;
		width: 100%;
		color: #fff;
		background: url(../../static/headbg.png) no-repeat 50%;

		.heard-title {
			height: 88rpx;
			text-align: center;
			line-height: 88rpx;
		}

		.heard-edu {
			padding: 0 70rpx;
			display: flex;
			margin-top: 10rpx;

			.edu {
				font-size: 80rpx;
				flex: 1;
				text-align: right;
				margin-right: 40rpx;
			}

			.edu-right {
				align-items: center;
				display: flex;
			}
		}

		.heard-edulist {
			padding: 0 70rpx;
			display: flex;
			margin-top: 60rpx;
			flex-wrap: wrap;
			justify-content: center;

			.heard-edulist-item {
				width: 18%;
				padding: 10rpx 0;
				border-radius: 3px;
				background-color: #F5F5F9;
				text-align: center;
				margin: auto;
				color: #999999;
			}

			.heard-edulist-select {
				background-color: #58CFF7 !important;
				color: #fff !important;
			}
		}
	}

	.qixian {
		width: 100%;

		.qixian-panel {
			padding: 20rpx;
		}

		.yue {
			display: flex;
			margin-top: 20rpx;
		}

		.yue-item {
			width: 18%;
			padding: 10rpx 0;
			border-radius: 3px;
			background-color: #F5F5F9;
			text-align: center;
			margin-right: 20rpx;
			color: #999999;
		}

		.yue-select {
			background-color: #58CFF7 !important;
			color: #fff !important;
		}
	}

	.huankuan {
		width: 100%;

		.huankuan-panel {
			padding: 20rpx;

			.huaikuan-yue {
				display: flex;

				.left {
					flex: 1;
				}

				.hui {
					color: #999999;
					font-size: 26rpx;
				}
			}
		}
	}

	.xieyi-panel {
		font-size: 28rpx;
		width: 100%;

		.checkbox {
			padding: 30rpx;
		}

		.cheng-color {
			color: #FA6400;
		}

		.cheng-red {
			color: #ff0000;
		}
	}

	.button-panel {
		width: 100%;

		.button-jieian {
			padding: 24rpx;
		}
	}

	.swiper {
		width: 100%;
	}

	.w100 {
		width: 100%;
	}
</style>
